<template>
  <div
    class="hotel-admin-settings bg-white dark:bg-gray-800 min-h-screen p-6"
    :class="{ dark: isDark }"
  >
    <el-card class="mb-6">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2"><Lock /></el-icon>
          <span class="text-lg font-medium">修改密码</span>
        </div>
      </template>

      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="120px"
        class="max-w-lg"
      >
        <el-form-item label="当前密码" prop="currentPassword">
          <el-input
            v-model="passwordForm.currentPassword"
            type="password"
            show-password
            placeholder="请输入当前密码"
          />
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码"
          />
        </el-form-item>

        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请再次输入新密码"
          />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleChangePassword">
            确认修改
          </el-button>
          <el-button @click="resetPasswordForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mb-6">
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2"><Bell /></el-icon>
          <span class="text-lg font-medium">通知设置</span>
        </div>
      </template>

      <el-form
        ref="notificationFormRef"
        :model="notificationSettings"
        label-width="120px"
      >
        <el-form-item label="订单通知">
          <el-switch
            v-model="notificationSettings.orderNotification"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="评价通知">
          <el-switch
            v-model="notificationSettings.reviewNotification"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="系统通知">
          <el-switch
            v-model="notificationSettings.systemNotification"
            active-text="开启"
            inactive-text="关闭"
          />
        </el-form-item>

        <el-form-item label="通知方式">
          <el-checkbox-group v-model="notificationSettings.notificationMethods">
            <el-checkbox label="email">邮件通知</el-checkbox>
            <el-checkbox label="sms">短信通知</el-checkbox>
            <el-checkbox label="system">系统通知</el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSaveNotificationSettings">
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <template #header>
        <div class="flex items-center">
          <el-icon class="mr-2"><Warning /></el-icon>
          <span class="text-lg font-medium">安全设置</span>
        </div>
      </template>

      <div class="space-y-6">
        <div class="flex items-center justify-between">
          <div>
            <div class="text-base font-medium">双因素认证</div>
            <div class="text-sm text-gray-500 mt-1">
              启用双因素认证，提高账号安全性
            </div>
          </div>
          <el-switch
            v-model="securitySettings.twoFactorAuth"
            @change="handleTwoFactorAuthChange"
          />
        </div>

        <div class="flex items-center justify-between">
          <div>
            <div class="text-base font-medium">登录通知</div>
            <div class="text-sm text-gray-500 mt-1">异地登录时发送通知提醒</div>
          </div>
          <el-switch
            v-model="securitySettings.loginNotification"
            @change="handleLoginNotificationChange"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { ElMessage } from "element-plus";
import { Lock, Bell, Warning } from "@element-plus/icons-vue";
import { useThemeStore } from "@/stores/theme";

const passwordFormRef = ref(null);
const passwordForm = ref({
  currentPassword: "",
  newPassword: "",
  confirmPassword: "",
});

const validatePass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (passwordForm.value.confirmPassword !== "") {
      if (passwordFormRef.value) {
        passwordFormRef.value.validateField("confirmPassword");
      }
    }
    callback();
  }
};

const validateConfirmPass = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== passwordForm.value.newPassword) {
    callback(new Error("两次输入密码不一致"));
  } else {
    callback();
  }
};

const passwordRules = {
  currentPassword: [
    { required: true, message: "请输入当前密码", trigger: "blur" },
  ],
  newPassword: [{ required: true, trigger: "blur", validator: validatePass }],
  confirmPassword: [
    { required: true, trigger: "blur", validator: validateConfirmPass },
  ],
};

const notificationFormRef = ref(null);
const notificationSettings = ref({
  orderNotification: true,
  reviewNotification: true,
  systemNotification: true,
  notificationMethods: ["system"],
});

const securitySettings = ref({
  twoFactorAuth: false,
  loginNotification: true,
});

const themeStore = useThemeStore();
const isDark = computed(() => themeStore.isDark);

// 监听主题变化
watch(
  () => themeStore.theme,
  (newTheme) => {
    document.documentElement.classList.toggle("dark", newTheme === "dark");
  },
  { immediate: true },
);

onMounted(() => {
  // 确保挂载时同步主题状态
  document.documentElement.classList.toggle("dark", isDark.value);
});

// 修改密码
const handleChangePassword = async () => {
  if (!passwordFormRef.value) return;

  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        // TODO: 调用修改密码的 API
        // await changePassword(passwordForm.value)
        ElMessage.success("密码修改成功");
        resetPasswordForm();
      } catch (error) {
        ElMessage.error("密码修改失败");
      }
    }
  });
};

// 重置密码表单
const resetPasswordForm = () => {
  if (!passwordFormRef.value) return;
  passwordFormRef.value.resetFields();
};

// 保存通知设置
const handleSaveNotificationSettings = async () => {
  try {
    // TODO: 调用保存通知设置的 API
    // await saveNotificationSettings(notificationSettings.value)
    ElMessage.success("设置保存成功");
  } catch (error) {
    ElMessage.error("设置保存失败");
  }
};

// 双因素认证变更
const handleTwoFactorAuthChange = async (value) => {
  try {
    // TODO: 调用更新双因素认证状态的 API
    // await updateTwoFactorAuth(value)
    ElMessage.success(value ? "双因素认证已开启" : "双因素认证已关闭");
  } catch (error) {
    securitySettings.value.twoFactorAuth = !value;
    ElMessage.error("设置更新失败");
  }
};

// 登录通知变更
const handleLoginNotificationChange = async (value) => {
  try {
    // TODO: 调用更新登录通知状态的 API
    // await updateLoginNotification(value)
    ElMessage.success(value ? "登录通知已开启" : "登录通知已关闭");
  } catch (error) {
    securitySettings.value.loginNotification = !value;
    ElMessage.error("设置更新失败");
  }
};
</script>

<style scoped>
.hotel-admin-settings {
  min-height: 100vh;
  width: 100%;
  transition: all 0.3s ease;
}

:deep(.dark) {
  .el-form-item__label,
  .el-input__inner,
  .el-select__input,
  .el-textarea__inner {
    color: #e5e7eb !important;
  }

  .el-input__inner,
  .el-textarea__inner {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
  }

  .el-card {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
  }

  .el-card__header {
    border-bottom-color: #374151 !important;
  }

  .el-button--default {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
  }

  .el-button--default:hover {
    background-color: #4b5563 !important;
    border-color: #6b7280 !important;
  }

  .el-radio-button__inner {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
  }

  .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
  }
}

/* 其他原有样式保持不变 */
.settings-container {
  margin: 16px auto;
  width: 100%;
  max-width: 1280px;
  padding: 0;
}
</style>
